<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
body{padding:10px;}
</style>
</head>
<body>



<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 1003 ? 'checked' : '' }}>
</script>
 
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 1007 ? 'checked' : '' }}>
</script>

<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
var url = "./json/user.json?v=2";
url = "./php/user.php";
var ojson = [{"name":"网站配置","active":true,"sort":"2","key":"0","id":1,"item":[{"gid":"1","type":"input","title":"网站名称","key":"WEBNAME","config":"三七520网","description":"网站的名称","sort":"3"},{"gid":"1","type":"input","title":"关键词","key":"KEYWORDS","config":"三七粉的吃法","description":"三七粉的吃法","sort":"2"},{"gid":"1","title":"网站描述","key":"DESCRIPTION","config":"我是网站描述","description":"网站的关键词","type":"textarea","sort":"3"},{"gid":"1","type":"input","title":"赵子龙","key":"ZHAOZILONG","config":"我乃常山赵子龙","description":"","sort":"100"},{"gid":"1","title":"备案信息","key":"BEIAN","config":"我是备案信息","description":"","type":"input","sort":"100"},{"gid":"1","type":"input","title":"开启缓存","key":"OPENCACHE","config":"0","description":"1:开启缓存;0:关闭缓存","sort":"100"},{"gid":"1","type":"input","title":"标题","key":"BIAOTI","config":"三七粉的吃法「吃三七粉交流平台」","description":"","sort":"100"}]},{"name":"上传配置","sort":"2","key":"1","active":false,"id":2,"item":[{"gid":2,"title":"上传图片大小","config":"3145728","description":"配置上传图片的大小","type":"input","sort":1,"key":"IMGSIZE"},{"gid":2,"title":"上传图片类型","config":"jpg,jpeg,png","description":"配置上传图片的类型,用逗号隔开","type":"input","sort":2,"key":"IMGTYPE"},{"gid":2,"title":"上传文件大小","config":"3145728","description":"配置上传文件的大小","type":"input","sort":3,"key":"FILESIZE"},{"gid":"2","title":"更多","key":"SFSDFSF","config":"撒打发","description":"","type":"input","sort":"100"}]}];
console.log(ojson);
var datas = ojson[0];
console.log(datas.item);
var data = [
    {"id": "10001","username": "杜甫","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"},
    {"id": "10002","username": "李白","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true}
];
var data = datas.item;
layui.use('table',function(){
    var table = layui.table;
    var form = layui.form;
    table.render({
        elem:'#test',
        // url:url,
        cellMinWidth:80,
        toolbar: '#toolbarDemo',
        data:data,
        cols:[[
            {title:'排序',field:'sort',width:80,edit:'text',sort:true},
            {title:'标题',field:'title',width:120,edit:'text'},
            {title:'配置',field:'config',edit:'text'},
            {title:'标识',field:'key',width:200},
            {title:'操作',fixed:'right',toolbar: '#barDemo',width:150}
        ]],
        //page:true, // 开始分页
    });
    // 头部工具栏
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
            case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
            break;
            case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选');
            break;
        };
    });
    //监听行工具事件
    table.on('tool(test)',function(obj){
        var data = obj.data;
        console.log(obj);
        if(obj.event === 'edit'){
            layer.msg('你点击了要修改'+obj.data.id+'这条数据');
        };
        if(obj.event === 'del'){
            layer.confirm("确定要删除"+obj.data.id+'吗?',function(index){
                obj.del();
                layer.close(index);
            });
        };
    });
    // 监听单元格编辑
    table.on('edit(test)',function(obj){
        var value = obj.value; // 获取修改后的值
        var data = obj.data;// 获取所在行的键值
        var field = obj.field;// 得到修改的字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    });
    //监听性别操作
    form.on('switch(sexDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });
    //监听锁定操作
    form.on('checkbox(lockDemo)', function(obj){
        layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    });
});
</script>
</body>
</html>